<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.min.js"></script>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>

<body>
    <div id="app">
<router-view></router-view>
    </div>

    <script>
var login={
    template:"<h3>login components</h3>"
}, register={
    template:"<h3>register components</h3>"
};

var routerObj=new VueRouter({
    routes:[
        {path:"/login",component:login},
        {path:"/register",component:register}
    ]
})

        var vm = new Vue({
            el: "#app",
            data: {
                list:[
                    {id:Date.now(),name:"libai",content:"libai say "},
                    {id:Date.now(),name:"jiangxiaobai",content:"jiangxiaobai say "},
                    {id:Date.now(),name:"xiaoma",content:"xiaoma say "}
                ]
            },
            methods: {
                loadComments(){
                    this.list=JSON.parse(localStorage.getItem("cmts")||"[]");
                }
            },
            created(){
                this.loadComments();
            },
            router:routerObj
        })
    </script>
</body>

</html>